<template>
  <div>
    <Header :title="'返回'" :subTitle="'销售单列表'" :hasBackPath="true" @headerBack="headerBack"></Header>
    <a-card :bordered="false">
      <detail-list title=" 基础信息">
        <detail-list-item term="销售单单号">{{ orderDetail.orderSn }}</detail-list-item>
        <detail-list-item term="服务单单号">{{ orderDetail.boxSn }}</detail-list-item>
        <detail-list-item term="创建时间">{{ orderDetail.createTime }}</detail-list-item>
        <detail-list-item term="优惠券号" class="mulitNo">{{ orderDetail.vouchersNo ? orderDetail.vouchersNo : '-' }}</detail-list-item>
        <detail-list-item term="业务单号" class="mulitNo">{{ orderDetail.serviceSn ? orderDetail.serviceSn : '-' }}</detail-list-item>
        <a-divider style="margin-bottom: 16px" dashed />
        <detail-list-item term="客户姓名">{{ orderDetail.nickName }}</detail-list-item>
        <detail-list-item term="客户手机号">{{ orderDetail.phone }}</detail-list-item>
        <detail-list-item term="归属搭配师">{{ orderDetail.fashonerName }}</detail-list-item>
      </detail-list>
      <a-divider style="margin-bottom: 32px" />
      <div class="title">商品信息</div>
      <a-table style="margin-bottom: 24px" :rowKey="record => record.id" :columns="goodsColumns" :dataSource="tableData" :pagination="false" ref="table">
        <span slot="serial" slot-scope="text, record, index">
          {{ index + 1 }}
        </span>
        <span slot="goods" slot-scope="text, record">
          <ListInfo :record="record" :showDetail="true" @openGoodsDetail="openGoodsDetail"></ListInfo>
        </span>
        <span slot="refund" slot-scope="text, record">
          <router-link :to="`/box/afterSalesOrder/examine/${record.boxRefundSn}`" class="red" v-if="record.boxRefundSn && record.boxRefundRemark != '买贵退差价'">已退款</router-link>
          <router-link :to="`/box/afterSalesOrder/examine/${record.boxRefundSn}`" class="red" v-if="record.boxRefundSn && record.boxRefundRemark == '买贵退差价'">已退差价</router-link>
        </span>
      </a-table>
      <div class="goods-sum">
        <div>
          <span
            >商品数：
            <span class="red">{{ orderDetail.productTotalQty }}</span>
          </span>
          <span
            >商品总价：
            <span class="red">¥ {{ orderDetail.productTotalPrice }}</span>
          </span>
        </div>
        <div>
          <p>会员优惠：- ¥ {{ orderDetail.vipDiscount ? orderDetail.vipDiscount : 0 }}</p>
          <p>商品优惠：- ¥ {{ orderDetail.productDiscount ? orderDetail.productDiscount : 0 }}</p>
          <p>优惠券：- ¥ {{ orderDetail.discountAmount ? orderDetail.discountAmount : 0 }}</p>
          <p>收入金币：{{ orderDetail.coin }}</p>
          <p>
            实付金额：<span class="red">¥ {{ orderDetail.paidAmount }}</span>
          </p>
        </div>
      </div>
      <a-divider style="margin-bottom: 32px" />
      <detail-list title=" 支付信息">
        <detail-list-item term="支付方式">微信支付</detail-list-item>
        <detail-list-item term="微信交易号">{{ orderDetail.wechatTransactionId }}</detail-list-item>
        <detail-list-item term="支付流水号">{{ orderDetail.tradeNo }}</detail-list-item>
        <detail-list-item term="支付时间">{{ orderDetail.createTime }}</detail-list-item>
      </detail-list>
    </a-card>
    <GoodInfoModal ref="goodInfoModal"></GoodInfoModal>
  </div>
</template>
<script>
import { querySalesOrderDetail } from '@/api/box/order'
import DetailList from '@/components/tools/DetailList'
import Header from '@/views/box/components/layouts/Header'
import ListInfo from '@views/box/components/goodsInfo/listInfo'
import GoodInfoModal from '@views/box/components/GoodInfoModal'
const DetailListItem = DetailList.Item

export default {
  components: {
    DetailList,
    DetailListItem,
    Header,
    ListInfo,
    GoodInfoModal
  },
  data() {
    return {
      goodsColumns: [
        {
          title: '序号',
          scopedSlots: { customRender: 'serial' }
        },
        {
          title: '商品',
          dataIndex: 'barcode',
          scopedSlots: { customRender: 'goods' },
          width: '400px'
        },
        {
          title: '吊牌价(元)',
          dataIndex: 'productPrice',
          align: 'center'
        },
        {
          title: '数量',
          dataIndex: 'productQuantity',
          align: 'center'
        },
        {
          title: '活动策略减免(元)',
          dataIndex: 'productFavorablePrice',
          align: 'center'
        },
        {
          title: '会员折扣减免(元)',
          dataIndex: 'vipPrice',
          align: 'center'
        },
        {
          title: '应付金额(元)',
          dataIndex: 'paidAmount',
          align: 'center'
        },
        {
          title: '实付金额(元)',
          dataIndex: 'priceactual',
          align: 'center'
        },
        {
          title: '退款状态',
          dataIndex: 'refund',
          scopedSlots: { customRender: 'refund' }
        }
      ],
      orderId: '',
      tableData: [],
      orderDetail: {}
    }
  },
  watch: {},
  activated() {
    this.fetchData()
  },
  methods: {
    headerBack() {
      this.$router.back()
    },
    fetchData() {
      this.orderId = this.$route.params.id
      let params = {
        requestData: {
          orderId: this.orderId
        }
      }
      console.log(params)
      querySalesOrderDetail(params).then(res => {
        if (res.code == 0) {
          this.orderDetail = res.data
          this.tableData = res.data.orderDetails
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    openGoodsDetail(productId, skuId) {
      this.$refs.goodInfoModal.show(productId, skuId)
    }
  }
}
</script>

<style lang="less" scoped>
.top {
  display: flex;
  padding: 16px 0;
  h2 {
    margin-right: 24px;
  }
  .btn-box {
    button {
      margin-right: 12px;
    }
  }
}
.title {
  color: rgba(0, 0, 0, 0.85);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}
.goods-sum {
  font-size: 16px;
  line-height: 32px;
  display: flex;
  justify-content: space-between;
  p {
    margin-bottom: 4px;
    .red {
      margin-right: 8px;
    }
  }
}
.red {
  color: #f45555;
  margin-right: 24px;
  font-size: 20px;
}
.mulitNo {
  /deep/.content {
    overflow-wrap: anywhere;
  }
}
</style>

